<template>
  <div class="user">
    <template v-if="showBase">
      <div class="first-half"></div>
      <div class="second-half"></div>
      <div class="userInfo-base" @click="jumpDetails">
        <van-image
          round
          fit="cover"
          width="100%"
          height="100%"
          :src="userInfo.userAvatar"
        />
        <div class="user-count">{{ userInfo.account }}</div>
      </div>
      <div class="login-out" @click="loginOut">退出登录</div>
    </template>
    <template v-else>
      <user-details @onBackBase="showBase = true"></user-details>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import UserDetails from "./user-details.vue";
export default {
  created() {},
  components: {
    UserDetails,
  },
  computed: {
    ...mapState("m_user", ["userInfo"]),
  },
  data() {
    return {
      showBase: true,
    };
  },
  methods: {
    ...mapMutations("m_user", ["changeHavingLogin", "setUserInfo"]),
    jumpDetails() {
      this.showBase = false;
    },
    loginOut() {
      // 清空token, 清空user的vuex数据
      localStorage.removeItem("token");
      this.setUserInfo({});
      this.changeHavingLogin(false);
      // 清楚cookie的sessionId
      console.log(this)
    },
  },
};
</script>

<style lang="scss">
.user {
  position: relative;
  width: 100%;
  height: 100%;

  .first-half,
  .second-half {
    height: 50%;
    background-color: #232323;
  }

  .second-half {
    background-color: #fff;
  }

  .userInfo-base {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .user-count {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .login-out {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    padding: 20px 40px;
    background-color: #000;
    color: #fff;
    border-radius: 30px;
  }
}
</style>
